<template>
  <div class="member">
    <!--S顶部-->
    <roof title="个人中心"></roof>
    <!--E顶部-->

    <!--S内容-->
    <div id="content" :style="{'padding-top':content_padding_top+'px'}">
      <scroll-view class="scroll" :scroll-y="true">

        <!--S头部-->
        <div id="header">
          <!--S头像昵称-->
          <div class="header">
            <img class="avatar"
                 mode="aspectFill"
                 src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1169318315,2738689370&fm=26&gp=0.jpg"/>
            <p class="name">醉解心语</p>
            <p class="other">
              <span>关注 999+</span>
              <span>粉丝 100</span>
              <span>获赞 100</span>
            </p>
          </div>
          <!--E头像昵称-->

          <!--S摊位&&卡券-->
          <div class="stall-coupon">
            <div class="item">
              <div class="icon">
                <img src="/static/images/stall-icon.png" />
              </div>
              <p class="name">我的摊位</p>
              <p class="brief">正在营业</p>
            </div>
            <div class="item">
              <div class="icon">
                <img src="/static/images/coupon-icon.png" />
              </div>
              <p class="name">我的卡券</p>
              <p class="brief">32张可用卡券</p>
            </div>
          </div>
          <!--E摊位&&卡券-->
        </div>
        <!--E头部-->

        <!--S广告banner-->
        <div id="banner">
          <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3872924969,352227241&fm=26&gp=0.jpg" mode="aspectFill" />
        </div>
        <!--E广告banner-->

        <!--S控制选项-->
        <div id="control">
          <dl>
            <dt><i class="iconfont icon-wofabudexiangmu"></i></dt>
            <dd class="text">我发布的</dd>
            <dd class="right-icon"><i class="iconfont icon-you"></i></dd>
          </dl>

          <dl>
            <dt><i class="iconfont icon-wocanyudehuodong"></i></dt>
            <dd class="text">我参与的</dd>
            <dd class="right-icon"><i class="iconfont icon-you"></i></dd>
          </dl>

          <dl>
            <dt><i class="iconfont icon-liulanjilu"></i></dt>
            <dd class="text">浏览记录</dd>
            <dd class="right-icon"><i class="iconfont icon-you"></i></dd>
          </dl>

          <dl>
            <dt><i class="iconfont icon-lianxikefu"></i></dt>
            <dd class="text">联系客服</dd>
            <dd class="right-icon"><i class="iconfont icon-you"></i></dd>
          </dl>

          <dl>
            <dt><i class="iconfont icon-shezhi"></i></dt>
            <dd class="text">设置</dd>
            <dd class="right-icon"><i class="iconfont icon-you"></i></dd>
          </dl>
        </div>
        <!--E控制选项-->
      </scroll-view>
    </div>
    <!--E内容-->

    <!--S全局导航-->
    <i-tabbar value="member"></i-tabbar>
    <!--E全局导航-->
  </div>
</template>

<script>
  import roof from '../../components/roof/Roof'
  import iTabbar from '../../components/itabbar/ITabbar'
  import store from '../../store'
  export default {
    data () {
      return {
        // 顶部填充区域高度
        content_padding_top: 0
      }
    },
    components: {
      roof,
      'i-tabbar': iTabbar
    },
    computed: {
      // 设备信息
      systemInfo () {
        return store.state.systemInfo
      },
      // 胶囊位置信息
      capsulePosition () {
        return store.state.capsule
      }
    },
    mounted () {
      this.setContentPaddingTop()
    },
    methods: {
      /**
       * 设置内容区域的padding-top
       */
      setContentPaddingTop () {
        this.content_padding_top = this.systemInfo.statusBarHeight + (this.capsulePosition.height + ((this.capsulePosition.top - this.systemInfo.statusBarHeight) * 2))
      }
    }
  }
</script>

<style scoped lang="less" src="./index.less"></style>
